<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>聊天页面</title>

</head>
<script th:src="@{stomp.min.js}" type="text/javascript"></script>
<script th:src="@{sockjs.min.js}" type="text/javascript"></script>
<script th:src="@{jquery.min.js}" type="text/javascript"></script>

<body>
<p>聊天室</p>

<form id="wiselyForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit" value="发送">
</form>

<script th:inline="javascript">
    $("#wiselyForm").submit(function (e) {
        e.preventDefault();
        var text = $("#wiselyForm").find('textarea[name="text"]').val();
        sendSpittle(text);
    });

    var socket = new SockJS('/endpointChat');//设置连接到SockJS的endpoint名称
    stompClient = Stomp.over(socket);//使用stomp的子协议websocket客户端
    stompClient.connect('guest', 'guest', function (frame) {//连接websocket服务端
        console.log("Connected: " + frame);
        stompClient.subscribe('/user/queue/notifications', handleNotifiCation);
    });

    function handleNotifiCation(message) {
        $("#output").append("<b>Received: " + message.body + "</b><br>")
    }

    function sendSpittle(text) {
        stompClient.send("/chat", {}, text);
    }

    $("#stop").click(function () {
        stompClient.close;
    });
</script>


<div id="output"></div>
</body>
</html>
